<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="威龙的博客">
    <meta name="keyword" content="随缘">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>
        
        mac下搭建码云gitee+hexo博客 - 威龙的博客 | VeyronC&#39;s Blog
        
    </title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/aircloud.css">
    <link rel="stylesheet" href="/css/gitment.css">
    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_pl6z7sid89qkt9.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>
</head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> 心若水， 自非凡。该博客已迁移至 https://www.cnblogs.com/xrszff </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar">
            <img src="/img/avatar.jpg">
        </div>
        <div class="name">
            <i>威龙</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li>
                <a href="/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="/archive">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li>
                <a href="/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#在码云创建好同名仓库，并新增index-html测试"><span class="toc-text">在码云创建好同名仓库，并新增index.html测试</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#安装hexo，部署主题"><span class="toc-text">安装hexo，部署主题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#换主题"><span class="toc-text">换主题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#添加和删除文章"><span class="toc-text">添加和删除文章</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#文章中使用图片"><span class="toc-text">文章中使用图片</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#注意：博客源代码和生成代码分开存储"><span class="toc-text">注意：博客源代码和生成代码分开存储</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#参考"><span class="toc-text">参考</span></a></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input">
            <span id="begin-search">搜索</span>
        </div>
        <div style="padding:10px 20px;font=10;">
            若搜索无反应请更换浏览器~
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>
        <div class="index-about-mobile">
            <i> 心若水， 自非凡。该博客已迁移至 https://www.cnblogs.com/xrszff </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        mac下搭建码云gitee+hexo博客
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2019-03-21 01:34:01</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/tags/#个人博客搭建" title="个人博客搭建">个人博客搭建</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>

    </div>
    <div class="post-content no-indent">
        <p>之前自己做了很多笔记，但都是在私有云笔记，有些经典，有些凌乱，独乐乐不如众乐乐，想了想，还是做个博客吧，复习整理的过程中，希望有缘人有所收获~</p>
<p>个人静态博客，其实用不到专门买服务器，用个好点的模板，搜索、图床、统计访客、评论等功能都一应俱全，且搭建方便。</p>
<p>网上搭建方式纷繁复杂，各式各样，该文总结了一下，只保留精华，和容易出错的细节，并在最后记录参考链接。</p>
<p>总体思路就是用gitee（码云）来做存储（文章和图片），不用github是个人觉得在国内访问码云更快。自动生成和部署利用的是hexo框架。</p>
<p>前置需要装Git、Node.js，这个在mac下直接用brew即可。</p>
<p>正文首先介绍如何初次创建和访问到自己的gitee域名下的个人博客测试页面。</p>
<p>然后讲解如何用hexo部署一个默认的模板，并生成、发布、展现成功。</p>
<p>剩下的就是讲解如何使用一个不错的模板。</p>
<p>目前评论功能还没摸索过，等有空测试成功后，会再记录一篇。</p>
<h1 id="在码云创建好同名仓库，并新增index-html测试"><a href="#在码云创建好同名仓库，并新增index-html测试" class="headerlink" title="在码云创建好同名仓库，并新增index.html测试"></a>在码云创建好同名仓库，并新增index.html测试</h1><p>如果你想你的 pages 首页访问地址不带二级目录，如ipvb.gitee.io，你需要建立一个与自己个性地址同名的仓库，如 <a href="https://gitee.com/ipvb" target="_blank" rel="noopener">https://gitee.com/ipvb</a> 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 <a href="https://gitee.com/ipvb/ipvb" target="_blank" rel="noopener">https://gitee.com/ipvb/ipvb</a> 部署完成后，就可以以 <a href="https://ipvb.gitee.io" target="_blank" rel="noopener">https://ipvb.gitee.io</a> 进行访问了。</p>
<p>创建好后，新增index.html</p>
<p>选择服务-》Gitee Pages</p>
<h1 id="安装hexo，部署主题"><a href="#安装hexo，部署主题" class="headerlink" title="安装hexo，部署主题"></a>安装hexo，部署主题</h1><p>安装hexo客户端<br><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-<span class="keyword">cli</span></span><br></pre></td></tr></table></figure></p>
<p>用hexo部署目录<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo init myblog</span><br><span class="line"><span class="built_in">cd</span> myblog</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure></p>
<p>本地看效果<br><figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo <span class="keyword">server</span></span><br></pre></td></tr></table></figure></p>
<p>访问<code>http://localhost:4000</code></p>
<p>先安装部署模块：<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install</span> hexo-deployer-git <span class="comment">--save</span></span><br></pre></td></tr></table></figure></p>
<p>修改<code>_config.yml</code><br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">url</span>: <span class="attribute">https</span>:<span class="comment">//veyronc.gitee.io/</span></span><br><span class="line"><span class="attribute">root</span>: /</span><br><span class="line"><span class="attribute">deploy</span>:</span><br><span class="line">  <span class="attribute">type</span>: git</span><br><span class="line">  <span class="attribute">repo</span>: <span class="attribute">https</span>:<span class="comment">//gitee.com/veyronc/veyronc.git</span></span><br><span class="line">  <span class="attribute">branch</span>: master</span><br></pre></td></tr></table></figure></p>
<p>注意配置冒号后面有个空格。</p>
<p>清理生成部署<br><figure class="highlight verilog"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo <span class="keyword">generate</span></span><br><span class="line">hexo deploy</span><br></pre></td></tr></table></figure></p>
<p><code>hexo deploy</code>即将代码传到码云刚才建的新项目上。第一次执行会让输入码云的用户名和密码。</p>
<p>上传完成后，需要在码云的服务-》Gitee Pages，里面再次点击更新。</p>
<p>默认主题可能加载慢，介绍的目的是为了熟悉hexo和发布更新的操作，实际用下面的主题更好看。前面生成的文件夹删了也没关系。</p>
<h1 id="换主题"><a href="#换主题" class="headerlink" title="换主题"></a>换主题</h1><p>主题可以到 <a href="https://hexo.io/themes/" target="_blank" rel="noopener">https://hexo.io/themes/</a> 去选择，博主选的是aircloud。</p>
<p><a href="https://github.com/aircloud/hexo-aircloud-blog" target="_blank" rel="noopener">https://github.com/aircloud/hexo-aircloud-blog</a></p>
<p>不在刚才的目录下操作了。重新找个地方。<br><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git <span class="keyword">clone</span> <span class="title">https</span>://github.com/aircloud/hexo-aircloud-blog.git --recursive</span><br><span class="line">cd hexo-aircloud-blog</span><br><span class="line">npm install</span><br><span class="line">hexo serve</span><br></pre></td></tr></table></figure></p>
<p>如上一章修改<code>_config.yml</code><br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">url</span>: <span class="attribute">https</span>:<span class="comment">//veyronc.gitee.io/</span></span><br><span class="line"><span class="attribute">root</span>: /</span><br><span class="line"><span class="attribute">deploy</span>:</span><br><span class="line">  <span class="attribute">type</span>: git</span><br><span class="line">  <span class="attribute">repo</span>: <span class="attribute">https</span>:<span class="comment">//gitee.com/veyronc/veyronc.git</span></span><br><span class="line">  <span class="attribute">branch</span>: master</span><br></pre></td></tr></table></figure></p>
<p>清理、生成、部署<br><figure class="highlight verilog"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo <span class="keyword">generate</span></span><br><span class="line">hexo deploy</span><br></pre></td></tr></table></figure></p>
<p>或者您可执行下列的其中一个命令，让 Hexo 在生成完毕后自动部署网站，两个命令的作用是相同的。</p>
<figure class="highlight verilog"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo <span class="keyword">generate</span> --deploy</span><br><span class="line">hexo deploy --<span class="keyword">generate</span></span><br></pre></td></tr></table></figure>
<p>可简写为<br><figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">hexo g -d</span></span><br><span class="line"><span class="attribute">hexo d -g</span></span><br></pre></td></tr></table></figure></p>
<p>每次deploy变更完后，想要在访问<code>https://veyronc.gitee.io/</code>的时候看到效果，都需要在码云的服务-》Gitee Pages，里面再次点击更新。</p>
<h1 id="添加和删除文章"><a href="#添加和删除文章" class="headerlink" title="添加和删除文章"></a>添加和删除文章</h1><p>添加文章<code>hexo new &#39;文章新建测试&#39;</code>会看到<br><figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">INFO  Created: ……<span class="regexp">/hexo-aircloud-blog/</span><span class="keyword">source</span><span class="regexp">/_posts/</span>文章新建测试.md</span><br></pre></td></tr></table></figure></p>
<p>然后去修改之。标签可以多个。<br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">文章新建测试</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2019</span><span class="bullet">-03</span><span class="bullet">-21</span> <span class="number">01</span><span class="string">:03:47</span></span><br><span class="line"><span class="attr">tags:</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">标签1</span></span><br><span class="line"><span class="bullet">    -</span> <span class="string">标签2</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure></p>
<p>删除文章需要删除的是目录<code>hexo-aircloud-blog/source/_posts</code>里的文章</p>
<p>执行完后还是生成、部署、最后记得在gitee更新Pages服务。</p>
<p><code>hexo clean</code>操作官方说明是：</p>
<blockquote>
<p>Cleans the cache file (db.json) and generated files (public).</p>
</blockquote>
<p>测试发现，如果不执行该命令，删除了<code>source/_posts</code>里的文章，访问页面也看不到了，只不过还会存在gitee的<code>public</code>文件夹中。</p>
<h1 id="文章中使用图片"><a href="#文章中使用图片" class="headerlink" title="文章中使用图片"></a>文章中使用图片</h1><p>图片也可以利用gitee存储，就放在<code>hexo-aircloud-blog/source/img</code></p>
<p>md文件中载入用 <code>![](/img/kds.jpg)</code></p>
<h1 id="注意：博客源代码和生成代码分开存储"><a href="#注意：博客源代码和生成代码分开存储" class="headerlink" title="注意：博客源代码和生成代码分开存储"></a>注意：博客源代码和生成代码分开存储</h1><p>上面介绍的一系列操作，是将博客生成代码传到码云的发布代码仓库。另外，设想一下如果你的本地电脑崩了怎么办，下次配置生成是不是很麻烦，所以，整个hexo-aircloud-blog文件夹，也新建一个代码仓库存起来，存成私有仓库即可。</p>
<p>『博客源代码』： Hexo的源码，包括themes目录（博客模板），source目录(使用MarkDown写的博客)等</p>
<p>『博客生成代码』： 执行hexo generate或者hexo server命令生成的代码，是Hexo自动生成的，再public目录。</p>
<p>博主用的方法应该是比较方便的，新建一个私有仓库 blog-source，克隆下来后，把前面的博客生成代码目录里面所以文件拷过来。</p>
<p>则在 blog-source 根目录下 git 操作相当于传到博客源代码私有仓库blog-source。</p>
<p>用 hexo 命令操作的是上传到博客生成代码仓库。</p>
<h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><p><a href="https://gitee.com/help/articles/4136#article-header1" target="_blank" rel="noopener">https://gitee.com/help/articles/4136#article-header1</a></p>
<p><a href="https://github.com/aircloud/hexo-theme-aircloud" target="_blank" rel="noopener">https://github.com/aircloud/hexo-theme-aircloud</a></p>
<p><a href="https://blog.csdn.net/adobeid/article/details/81259381#giteement" target="_blank" rel="noopener">https://blog.csdn.net/adobeid/article/details/81259381#giteement</a></p>
<p><a href="https://wudong.tech/2018/08/29/Hexo%E6%8E%A5%E5%85%A5%E7%A0%81%E4%BA%91%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/" target="_blank" rel="noopener">https://wudong.tech/2018/08/29/Hexo%E6%8E%A5%E5%85%A5%E7%A0%81%E4%BA%91%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/</a></p>
<p><a href="https://blog.csdn.net/qq_34461514/article/details/79733669" target="_blank" rel="noopener">https://blog.csdn.net/qq_34461514/article/details/79733669</a></p>
<p><a href="https://hexo.io/docs/commands" target="_blank" rel="noopener">https://hexo.io/docs/commands</a></p>
<p><a href="https://hexo.io/zh-cn/docs/deployment" target="_blank" rel="noopener">https://hexo.io/zh-cn/docs/deployment</a></p>
<p><a href="https://segmentfault.com/q/1010000008049369/a-1020000008049754" target="_blank" rel="noopener">https://segmentfault.com/q/1010000008049369/a-1020000008049754</a></p>

        
            <div class="donate-container">
    <div class="donate-button">
        <button id="donate-button">赞赏</button>
    </div>
    <div class="donate-img-container hide" id="donate-img-container">
        <img id="donate-img" src data-src="/img/donate.jpg">
        <p> 感谢鼓励 </p>
    </div>
</div>
        
        <br>
        <div id="comment-container">
        </div>
        <div id="disqus_thread"></div>

        <div id="lv-container">
        </div>

    </div>
</div>

    </div>
</div>


<footer class="footer">
    <ul class="list-inline text-center">
        
        

        
        <li>
            <a target="_blank" href="http://weibo.com/2983694150">
                            <span class="fa-stack fa-lg">
                                  <i class="iconfont icon-weibo"></i>
                            </span>
            </a>
        </li>
        

        

        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a href="https://www.10000h.top">10000H</a></span>
        <span>/</span>
        
        <span><a href="https://niexiaotao.com">Xiaotao&#39;s Page</a></span>
        <span>/</span>
        
        <span><a href="#">It helps SEO</a></span>
        <span>/</span>
        
    </p>
    
    <p>
        <span id="busuanzi_container_site_pv">
            <span id="busuanzi_value_site_pv"></span>PV
        </span>
        <span id="busuanzi_container_site_uv">
            <span id="busuanzi_value_site_uv"></span>UV
        </span>
        Created By <a href="https://hexo.io/">Hexo</a>  Theme <a href="https://github.com/aircloud/hexo-theme-aircloud">AirCloud</a></p>
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/index.js"></script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


    <script>
        /**
         *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
         *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
        */
        if( '' || '')
        var disqus_config = function () {
            this.page.url = '';  // Replace PAGE_URL with your page's canonical URL variable
            this.page.identifier = ''; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };

        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document, s = d.createElement('script');
            s.src = 'https://airclouds-blog.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>



</html>
